<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 头部的盒子 -->
    <header>
        <h1>菌菇房环境数据可视化</h1>
        <div class="showTime"></div>
        <script>
          var t = null;
          t = setTimeout(time, 1000); //開始运行
          function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
              "当前时间：" +
              y +
              "年" +
              mt +
              "月" +
              day +
              "日" +
              "-" +
              h +
              "时" +
              m +
              "分" +
              s +
              "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
          }
        </script>
      </header>
      <!-- 页面主体部分 -->
      <section class="mainbox">
          <div class="column">
            <div class="panel bar">
              <a href="/controlsun.html">                
                <h2>
                折线图-光照变化 
                </h2></a>
                
                <div class="chart"></div>
                <div class="panel-footer"></div>
              </div>
              <div class="panel line">
                <!-- <h2>
                  折线图-温度变化 
                </h2> -->
                <a href="/control.html">                
                  <h2>
                  折线图-温度变化 
                </h2></a>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
              </div>
              <div class="panel pie">
                <a href="/controlhumidity.html">                
                  <h2>
                  折线图-湿度变化 
                </h2></a>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
              </div>
        </div>            
      
        <div class="column">
            <div class="no">
                <div class="no-hd">
                  <ul>
                    <li>125</li>
                    <li>100</li>
                  </ul>
                </div>
                <div class="no-bd">
                  <ul>
                    <li>未成熟蘑菇</li>
                    <li>待采摘蘑菇</li>
                  </ul>
                </div>
              </div>
            <div class="map">
                <div class="map1"></div>
                <div class="panel mid">
                  <!-- <h2>
                    折线图-温度变化 
                  </h2> -->
                  <a href="/control.html">                
                    <h2>
                    散点图-生长曲线模拟
                  </h2></a>
                  <div class="chart">图表</div>
                  <div class="panel-footer"></div>
                </div>

              </div>
        </div>
        <div class="column">
            <div class="panel bar2">

                <div class="wrap">
                  <ul>
                      <li>
                          <p>1：凯文童鞋 - 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                      <li>
                          <p>2：李- 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                      <li>
                          <p>3：岳 - 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                      <li>
                          <p>4：刘 - 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                      <li>
                          <p>5：周 - 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                      <li>
                          <p>6：刘 - 支付宝支付 - 120元 - XXX门店</p>
                      </li>
                  </ul>
                </div>

                <div class="panel-footer"></div>
              </div>
              <div class="panel line2">
                <a href="/controlCo.html">                
                  <h2>
                  折线图-CO2变化 
                </h2></a>
                <div class="chart">图表</div>
                <div class="panel-footer"></div>
              </div>
              <div class="panel pie">
                <h2>生长动图</h2>
                <div class="chart">
                  <img src="images/2021120218-2021120408.gif" alt="">
                </div>
                <div class="panel-footer"></div>
              </div>
        </div>
      </section>
    <script src="js/flexible.js"> </script>
    <!-- <script src="js/jquery.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <script src="js/echarts.min.js"></script>
    <script src="js/index.js"></script>

    
    
</body>
</html> 